<template>
  <div>
    <common-dialog ref="dialog" width="700px" title="菜单权限" id-key="id" :inDialog="inDialog" @closed="onClosed">
      <list id-key="id" ref="list" unit="菜单" :data="data" :disabled="disabled" expand-all-row show-index
        :show-query="false" :page="false">
        <template #toolbar-left>
          <slot name="toolbar-left"></slot>
        </template>
        <template #column>
          <el-table-column prop="name" label="菜单名称" min-width="150">
            <template v-slot="{ row }">
              {{ row.name }}
              <span class="c-text-grey" v-show="row.isPage">（子页面）</span>
            </template>
          </el-table-column>
          <el-table-column width="300" label="菜单权限">
            <template v-slot="{ row }">
              <el-tag v-for="p in row.permissions" :key="p.code" style="margin-right:5px">{{ p.name }}</el-tag>
            </template>
          </el-table-column>
          <!-- slot[column] -->
          <slot name="column"></slot>
          <!--/ slot[column]-->
        </template>
      </list>
    </common-dialog>
  </div>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import editDialogMixin from "@/mixins/editDialog";
import api from "@/api/sys/role";
import list from "@/components/common/list";
import listMixin from "@/mixins/list";

export default {
  mixins: [listMixin, editDialogMixin],
  components: { list, commonDialog },
  data() {
    return {
      data: []
    };
  },
  methods: {
    onClosed() {
      this.$refs.list.clear();
    },
    async showByRoleId(roleId) {
      this.$refs.dialog.loading(true);
      await this.$refs.dialog.show();
      let res = await api.getRoleMenuPermissionList(roleId)
      this.data = this.$commonJs.toTreeData(res.data);
      this.$refs.dialog.loading(false);
    }
  },
};
</script>